<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <!--v-model 是数据绑定将信息绑定到特定的位置-->
    <div style="border: 1px solid #cccccc;padding: 10px">
      <el-row>
        <!--左侧-->
        <el-col :span="10">
          <!-- 添加ref引用，他的值就是组件的实例对象 -->
          <!--inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。-->

          <!--左侧单选按钮列-->
          <el-row style="margin-bottom: 20px">
            <el-radio-group v-model="checkRadio" size="mini" @change="selectItems">
              <el-radio-button label="selectAll" border>全部</el-radio-button>
              <el-radio-button label="int64" border>int64</el-radio-button>
              <el-radio-button label="String" border>String</el-radio-button>
              <el-radio-button label="float64" border>float64</el-radio-button>
            </el-radio-group>
          </el-row>
          <!--左侧单选按钮列 end-->

          <!--左侧搜索 -->
          <el-row>
            <el-form ref="inputRefs" :model="searchInput" :inline="true">
              <el-form-item prop="tableDataName">
                <el-input
                  v-model="searchInput.tableDataName"
                  prefix-icon="el-icon-search"
                  width
                  :placeholder="searchHolder?searchHolder:'请输入搜索内容'"
                  style="width:100%"
                  @input="leftSearch"
                />
              </el-form-item>
              <!--<el-button type="primary" @click="doFilter">搜索</el-button>-->
              <!--<el-button type="primary" @click="resetFilter">重置</el-button>-->
            </el-form>
          </el-row>
          <!--左侧搜索  end-->

          <!--左侧选择数据框-->
          <el-row :span="10">
            <el-table
              ref="leftTable"
              :data="tableData"
              border
              height="280"
              style="width: 100%;margin-bottom: 0px"
              @selection-change="handleSelectionChange"
            >
              <!--选择列前面的按钮-->
              <el-table-column
                type="selection"
                width="40"
              />
              <!--需要选择的列-->
              <!--show-overflow-tooltip 将表格在屏幕中的占比自适应调整-->
              <!-- key属性的作用是每一个v-for都提供唯一的一个key属性 -->
              <el-table-column
                label="列名"
                prop="columnName"
                show-overflow-tooltip
              />
              <el-table-column
                label="数据类型"
                prop="type"
                show-overflow-tooltip
              />
            </el-table>
          </el-row>
          <!--左侧选择框 end-->
        </el-col>
        <!--左侧 end-->

        <!--中间的选择按钮-->
        <el-col :span="4">
          <div style="margin-top: 100%;margin-left:25%;margin-right:25%">
            <el-button type="primary" icon="icon el-icon-d-arrow-right" @click="addCol" />
          </div>
        </el-col>

        <!--右侧 -->
        <el-col :span="10">

          <!--右侧搜索-->
          <el-row :span="10" :offset="4">
            <el-form ref="selectedRefs" :model="searchSelected" :inline="true">
              <el-form-item prop="selectedDataName">
                <el-input
                  v-model="searchSelected.selectedDataName"
                  prefix-icon="el-icon-search"
                  :placeholder="searchHolder?searchHolder:'请输入搜索内容'"
                  style="width:100%"
                  @input="rightSearch"
                />
              </el-form-item>
            </el-form>
          </el-row>
          <!--右侧搜索 end-->

          <!--右侧表格-->
          <el-row>
            <el-table
              :data="resultData"
              height="280"
              style="width: 100%;margin-bottom: 0px"
              border
            >

              <el-table-column
                label="列名"
                prop="columnName"
                show-overflow-tooltip
              />
              <el-table-column
                label="数据类型"
                prop="type"
                show-overflow-tooltip
              />

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <!--click.native.prevent 是用来阻止默认行为的 即阻止默认的执行方法 来执行自己定义的handleDelete方法
                  scope.$index 中存放的是右侧resultData中的下标索引 row是存放的是表索引对应的行的信息，resultData存放的是删除后剩余的值
                  scope是通过插槽在子组件中传递过来的值-->
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,scope)"
                  >删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <!--右侧表格 end-->

        </el-col>
        <!--右侧  end-->

      </el-row>
    </div>
    <div style="float: right; margin-top: 10px; margin-bottom: 20px">
      <el-button @click="cancelMethod">取 消</el-button>
      <el-button type="primary" @click="StoreDataMethod">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style>

</style>

<script>
  import { cloneDeep } from 'lodash'
  import SingleCsvInputNode from '../publicComponents/SingleCsvInputNode.js'
export default {
  /**
     * 参数说明:
     * searchHolder:  搜索框提示的内容

     * 使用模板
     *  <g-transfer  :hasSearch="true" :isCheckValue="exportFieldVlue" :searchHolder="pSearchHolder" :receiveData="exportFieldData"  @dispatchData="getCurrentNodeTransfer" :tableKey="tableKey"></g-transfer>
     *  清除搜索条件方法   调用类似this.$refs['gTransferRef'].clearSearch();
     *  **/
  name: 'SelectColumn',
  props: {
    dialogVisible: Boolean,
    searchHolder: { type: String }
  },
  mixins:[SingleCsvInputNode],
  data() {
    return {
      tableData:[],
      checkRadio: 'selectAll',
      resultData: [], // 存放在右边需要渲染的数据
      multipleSelection: [], // 存储选中的那一行的信息
      searchInput: {
        tableDataName: '' // 左侧搜索框输入的值
      },
      searchSelected: {
        selectedDataName: '' // 右侧搜索框输入的值
      },
      filterTableDataEnd: [], // 存放在在左侧与输入的搜索项匹配的值
      filterSelectedDataEnd: [], // 存放右侧在搜索框输入数据后与之匹配的值
      resetData: [], // 用于左侧搜索框的重置
    }
  },
  computed: {
    computedData:function () {
      return this.inputData.filter(
        (item) =>
          // 不在右侧选中的表格中
          !this.formModel.config.SelectVar.some(
            (config) => config.columnName === item.columnName
          )
      )
    }
  },
  watch: {},
  created() {
    console.log('选择列初始化了')
    this.tableData = this.computedData
    this.resultData = this.formModel.config.SelectVar
  },

  methods: {
    cancelMethod() {
      this.$emit('close-dialog')
    },
    StoreDataMethod(e) {
      this.$emit('close-dialog') // 告诉父组件要修改管理窗口可视化的变量
      const { getSelected, update } = this.root.propsAPI
      const node = getSelected()[0]
      this.formModel.config.output = this.resultData
      update(node, this.formModel)
      console.log('sfaf',this.formModel.inputNode)
    },
    handleClose(done) {
      this.$emit('showchange1')
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {
        })
    },
    selectItems() {
      if (this.checkRadio === 'selectAll'){
        this.tableData = this.computedData
      }
      else{
        this.tableData = this.computedData.filter(
          item => {
            return item.type === this.checkRadio
          }
        )
      }
    },
    leftSearch() {
      console.log('已执行左侧搜索功能')
      // 每次手动将数据置空,因为会出现多次点击搜索情况
      this.filterTableDataEnd = []
      // 这里是为了阻止搜索框删除完最后一个值时再检索，数据会重复显示问题
      if (this.searchInput.tableDataName === '') {
        this.tableData = this.computedData
        return
      }
      this.computedData.forEach((value) => {
        // 如果filterTableDataEnd的长度为0 直接将匹配的元素放入即可， 否则需要判断filterTableDataEnd是否存有当前匹配项的元素，如果没有则放入
        if (value.columnName.indexOf(this.searchInput.tableDataName) >= 0) {
          if (this.filterTableDataEnd.length === 0) {
            this.filterTableDataEnd.push(value)
          } else if (this.filterTableDataEnd.length > 0) {
            if (this.filterTableDataEnd.indexOf(value) === -1) {
              this.filterTableDataEnd.push(value)
            }
          }
        }
      })
      this.tableData = this.filterTableDataEnd
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    addCol(){
      this.multipleSelection.forEach((selection) => {
        this.formModel.config.SelectVar.push(selection)
      })
      const { getSelected, update } = this.root.propsAPI
      const node = getSelected()[0]
      update(node, this.formModel)
      this.$refs.leftTable.clearSelection()
      this.resultData = node.getModel().config.SelectVar
      this.tableData = this.computedData
    },
    rightSearch() {
      console.log('已执行右侧搜索功能:')
      this.filterSelectedDataEnd = []
      // 如果右侧搜索框中的值为空的话，进行默认的初始化，将用户选择好的条目在右侧进行渲染并返回
      if (this.searchSelected.selectedDataName === '') {
        this.resultData = this.formModel.config.SelectVar
        return
      }
      // 箭头函数value index代表resetSelectedData中的value以及其下标值
      this.formModel.config.SelectVar.forEach((value) => {
        if (value.columnName.indexOf(this.searchSelected.selectedDataName) >= 0) {
          // 判断存放的数组中是否已包含将要搜索的对象 判断存放要在右侧进行渲染的数组中该数据是否存在，如果不存在直接push 否则需要判断该数组中是否有
          if (this.filterSelectedDataEnd.length === 0) {
            this.filterSelectedDataEnd.push(value)
          } else if (this.filterSelectedDataEnd.length > 0) {
            if (this.filterSelectedDataEnd.indexOf(value) === -1) {
              this.filterSelectedDataEnd.push(value)
            }
          }
        }
      })
      this.resultData = this.filterSelectedDataEnd
    },
    handleDelete(index, row, scope) {
      console.log(index, row,scope)
      this.formModel.config.SelectVar.splice(index, 1)
      this.tableData = this.computedData
      this.resultData = this.formModel.config.SelectVar
    },
  }
}
</script>
